<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
  <link rel="stylesheet" href="./css/Order page.css">
</head>

<body>
  <div class="xtx_topnav">
    <div class="wrapper">
      <!-- 顶部导航 -->
      <ul class="xtx_navs">
        <li>
          <!-- 有用户名数据 -->
          <!-- <a href="javascript:;"><i class="iconfont icon-user">用户名</i></a> -->
          <!-- 没有用户名数据 -->
          <a href="login/login.html">请先登录</a>
        </li>
        <li>
          <!-- 有用户名数据 -->
          <!-- <a href="javascript:;">退出登录</a> -->
          <!-- 没有用户名数据 -->
          <a href="./register.html">免费注册</a>
        </li>
        <li>
          <a href="./center-order.html">我的订单</a>
        </li>
        <li>
          <a href="./center.html">会员中心</a>
        </li>
        <li>
          <a href="javascript:;">帮助中心</a>
        </li>
        <li>
          <a href="javascript:;">在线客服</a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="mobile sprites"></i>
            手机版
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 头部 -->
  <div class="xtx_header">
    <div class="wrapper">
      <!-- 网站Logo -->
      <h1 class="xtx_logo"><a href=""><img src="img图片/logo.30c5f706.png" alt=""></a></h1>
      <!-- 主导航 -->
      <div class="xtx_navs">
        <ul class="clearfix">
          <li>
            <a href="./index.html">首页</a>
          </li>
          <li>
            <a href="./category01.html">生鲜</a>
          </li>
          <li>
            <a href="./category01.html">美食</a>
          </li>
          <li>
            <a href="./category01.html">餐厨</a>
          </li>
          <li>
            <a href="./category01.html">电器</a>
          </li>
          <li>
            <a href="./category01.html">居家</a>
          </li>
          <li>
            <a href="./category01.html">洗护</a>
          </li>
          <li>
            <a href="./category01.html">孕婴</a>
          </li>
          <li>
            <a href="./category01.html">服装</a>
          </li>
        </ul>
      </div>
      <!-- 站内搜索 -->
      <div class="xtx_search clearfix">
        <!-- 购物车 -->
        <a href="./cart-none.html" class="xtx_search_cart sprites">
          <i>1</i>
        </a>
        <!-- 搜索框 -->
        <div class="xtx_search_wrapper">
          <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
        </div>
      </div>
    </div>
  </div>
  <div class="header-sticky">
    <div class="container">
      <a href="" class="logo"><img src="" alt=""></a>
      <!-- 头部导航headernav -->
      <ul class="headernav">
        <li><a href="">首页</a></li>
        <li><a href="" class="home">居家</a></li>

        <li> <a href="">美食</a> </li>
        <li><a href="">服饰</a></li>
        <li><a href="">母婴</a></li>
        <li><a href="">个护</a></li>
        <li><a href="">严选</a></li>
        <li><a href="">数码</a></li>
        <li><a href="">运动</a></li>
        <li><a href="">杂项</a></li>
      </ul>
      <div class="right">
        <a href="">品牌</a>
        <a href="">专题</a>
      </div>
    </div>
  </div>
  <!-- 主体 -->
  <div class="subject">
    <div class="title">
      <ul class="titles">
        <li class="titless">首页 <i class="iconfont icon-angle-right"></i></li>
        <li class="titless">购物车 <i class="iconfont icon-angle-right"></i></li>
        <li class="titless">填写订单</li>
      </ul>
      <div class="wrapper">
        <div class="wrappers">
          <h3 class="shipping">收货地址</h3>
          <div class="shippings">
            <div class="Receiving ">
              <div class="Receivingzuo">
                <ul class="Receivings">
                  <li class="format"><span class="Receivingclour">收货人 :</span> xiaotuxian001</li>
                  <li class="format"><span class="Receivingclour">联系方式:</span> 136****6666</li>
                  <li class="format"><span class="Receivingclour">收货地址:</span>北京市 北京市 东城区 </li>
                </ul>

              </div>
              <div class="Receivingyou">
                <button class="buttons showswitchs">切换地址</button>
                <button class="buttons">添加地址</button>

              </div>
            </div>
          </div>

          <h3 class="box-title">商品信息</h3>
          <div class="box-body">
            <div class="goods">
              <div class="goodst">
                <ul class="goodsts">
                  <li class="goodstsd">商品信息</li>
                  <li>单价</li>
                  <li>数量</li>
                  <li>小计</li>
                  <li>实付</li>
                </ul>
                <ul class="goodstx">
                  <li class="blurb">
                    <img src="https://yanxuan-item.nosdn.127.net/fa3d10a78d37bbd3956ef5f8c855d1dc.jpg" alt="">
                    <div class="blurbr">
                      <p>休闲潮流运动男士胸包</p>
                      <p class="itemclour">颜色:黑色 </p>
                    </div>
                  </li>
                  <li>¥136.00</li>
                  <li>1</li>
                  <li>¥136.00</li>
                  <li>¥136.00</li>
                </ul>
              </div>
            </div>
          </div>
          <h3 class="box-title">配送时间</h3>
          <div class="delivery">
            <a href="" class="deliverys active">不限送货时间：周一至周日</a>
            <a href="" class="deliverys">不工作日送货：周一至周五</a>
            <a href="" class="deliverys">休日、假日送货：周六至周日</a>


          </div>
          <h3 class="box-title">支付方式</h3>
          <div class="delivery">
            <a href="" class="deliverys  active">在线支付</a>
            <a href="" class="deliverys">货到付款</a>
            <span class="mode">货到付款需付5元手续费</span>


          </div>
          <h3 class="box-title">金额明细</h3>
          <div class="detail">
            <div class="details">
              <p>商品件数：</p>
              <p class="detailss">1件</p>
            </div>
            <div class="details">
              <p>商品总价：</p>
              <p class="detailss">¥136</p>
            </div>
            <div class="details">
              <p>运 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 费:&nbsp;&nbsp;&nbsp;</p>
              <p class="detailss">1件</p>
            </div>
            <div class="details">
              <p>应付总额：</p>
              <p class="detaild">¥136</p>
            </div>
          </div>
          <div class="submit">
            <button class="submitc"><a href="./gwc.html">提交订单</a> </button>
          </div>
        </div>

      </div>


    </div>
  </div>

  <!-- 公共底部 -->
  <div class="xtx_footer clearfix">
    <div class="wrapper">
      <!-- 联系我们 -->
      <div class="contact clearfix">
        <dl>
          <dt>客户服务</dt>
          <dd class="chat">在线客服</dd>
          <dd class="feedback">问题反馈</dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd class="weixin">公众号</dd>
          <dd class="weibo">微博</dd>
        </dl>
        <dl>
          <dt>下载APP</dt>
          <dd class="qrcode">
            <img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/qrcode.520695e8.jpg">
          </dd>
          <dd class="download">
            <span>扫描二维码</span>
            <span>立马下载APP</span>
            <a href="javascript:;">下载页面</a>
          </dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="hotline">
            400-0000-000
            <small>周一至周日 8:00-18:00</small>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
      <div class="wrapper">
        <!-- 口号 -->
        <div class="slogan">
          <a href="javascript:;" class="price">价格亲民</a>
          <a href="javascript:;" class="express">物流快捷</a>
          <a href="javascript:;" class="quality">品质新鲜</a>
        </div>
        <!-- 版权信息 -->
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
          </p>
          <p>CopyRight &copy; 小兔鲜儿</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 地址栏 -->
  <div class="switchs">
    <div class="switchbody">
      <div class="switchader">
        <h3>切换收货地址</h3>
        <a href="" class="iconfont icon-close-new"></a>
      </div>
      <div class="switchsin">
        <div class="addressWrapper">
          <div class="text active">
            <ul>
              <li> <span>收&nbsp;货&nbsp;人：</span> xiaotuxian001 </li>
              <li> <span>联系方式</span> 136****6666</li>
              <li> <span>收货地址</span>北京市 北京市 东城区 </li>
            </ul>

          </div>
          <div class="text active">
            <ul>
              <li> <span>收&nbsp;货&nbsp;人：</span> xiaotuxian001 </li>
              <li> <span>联系方式</span> 136****6666</li>
              <li> <span>收货地址</span>北京市 北京市 东城区 </li>
            </ul>

          </div>
        </div>

      </div>

      <div class="switchfoot">
        <button class="cancel">取消</button>
        <button class="affirm">确认</button>
      </div>
    </div>
  </div>

  <script src="./js/Order page.js"></script>
</body>

</html>